<template>
	<div class="fungorytab1">
		<ul>
			<li v-for="item in list" :key='item.id'>
				<img :src="item.img" />
				<p>{{item.title}}</p>
				<label>{{item.name}}</label>
			</li>
		</ul>
		<ol>
			<li v-for="item in person" :key='item.id'>
				<article>{{item.title}}</article>
				<p>{{item.name}}</p>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'FungoryTab1',
		data(){
			return{
				list:[
					{id:1,img:'/fun/fun-1.jpg',name:"王者归来",title:'牛背山'},
					{id:2,img:'/fun/fun-2.jpg',name:"山水画廊",title:'桂林'},
					{id:3,img:'/fun/fun-3.jpg',name:"蓝冰仙境",title:'九寨沟'},
				],
				person:[
						{id:1,name:"冰封天池",title:'长白山'},
						{id:2,title:'潮汕'},
						{id:3,title:'普莫雍措'},
						{id:4,title:'三亚'},
						{id:5,title:'老君山'},
						{id:6,title:'泉州'},
				]
			}
		}
	}
</script>

<style scoped>
	
	.fungorytab1 ul{
		width: 100%;
		height: 3.2rem;
		margin-left: 0.15rem;
	}
	.fungorytab1 ul li{
		width: 31.5%;
		float: left;
		margin: 0 0.05rem;
		position: relative;
	}
	.fungorytab1 ul li img{
		width: 100%;
		height: 100%;
	}
	.fungorytab1 ul li:nth-child(1) img{
		border-radius: 0.2rem 0 0 0.2rem;
	}
	.fungorytab1 ul li:nth-child(3) img{
		border-radius: 0 0.2rem 0.2rem 0;
	}
	.fungorytab1 ul li p{
		position: absolute;
		top: 2rem;
		left: 1.05rem;
		font-size: 0.4rem;
		font-weight: bold;
		color: white;
	}
	.fungorytab1 ul li:nth-child(2) p{
		position: absolute;
		top: 2rem;
		left: 1.3rem;
	}
	.fungorytab1 ul li label{
		position: absolute;
		top: 2.5rem;
		left: 1.2rem;
		color: gainsboro;
	}
	.fungorytab1 ol{
		width: 100%;
		height: 3.5rem;
	}
	.fungorytab1 ol li{
		float: left;
		width: 30%;
		height: 1.3rem;
		margin-top: 0.2rem;
		margin-right: 0.1rem;
		margin-left: 0.15rem;
		background-color: white;
		border-radius: 0.1rem;
		text-align: center;
		position: relative;
			border: 1px solid gainsboro;
	}
	.fungorytab1 ol li article{
		font-size: 0.4rem;
		font-weight: bold;
		line-height: 1.3rem;
	}
	.fungorytab1 ol li:nth-child(1) p{
		position: absolute;
		top: 0rem;
		left: 0rem;
		background-color: #ffdd3f;
		padding: 0.1rem 0.15rem;
		border-radius: 0.1rem 0 0.25rem;
	}
</style>
